<template>
	<view class="collect">
		<u-tabs-swiper class="tabs-swiper" ref="uTabs" bg-color="#ffffff" bar-width="30" :list="list" :is-scroll="false"
		 :current="current" @change="tabsChange">
		</u-tabs-swiper>
		<swiper :style="tatalHeight" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<view v-if="true" class="swiper-itemNoPage" id="label">
					<image src="../../../static/缺省页_03.jpg"></image>
					<view class="goIssue">您还没有收藏过招工信息点击下方按钮去收藏</view>
					<view class="now">马上去收藏</view>
				</view>
				<view v-else="current == 0 && false">
					<view id="label">
						<view v-for="(item,index) in items" :key="index">
							<view class="title">标题</view>
							<view class="content">
								<image src="../../../static/logo.png"></image>
								<view class="message">
									<view class="personage-message">
										<view class="name">李先生</view>
										<view class="btn-message">
											<image class="btn-image" src="../../../static/首页ok_29-17.jpg"></image>
											<view class="status">正在招</view>
										</view>
									</view>
									<view class="concent">
										正文
									</view>
								</view>
							</view>
							<view class="foot">
								<view class="time">2020-11-03 16:08</view>
								<view class="cancle">
									取消收藏
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view v-if="false" class="swiper-itemNoPage" id="peo-label">
					<image src="../../../static/缺省页_03.jpg"></image>
					<view class="goIssue">您还没有收藏过找活信息点击下方按钮去收藏</view>
					<view class="now">马上去收藏</view>
				</view>
				<view v-else="current == 1 && true">
					<view id="peo-label">
						<view v-for="(item,index) in items" :key="index">
							<view class="title">标题</view>
							<view class="content">
								<image src="../../../static/logo.png"></image>
								<view class="message">
									<view class="personage-message">
										<view class="name">李先生</view>
										<view class="btn-message">
											<image class="btn-image" src="../../../static/首页ok_29-17.jpg"></image>
											<view class="status">正在招</view>
										</view>
									</view>
									<view class="concent">
										正文
									</view>
								</view>
							</view>
							<view class="foot">
								<view class="time">2020-11-03 16:08</view>
								<view class="cancle">
									取消收藏
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tatalHeight: "",
				current: 0,
				swiperCurrent: 0,
				tempList: [0, 1],
				list: [{
						name: "招工信息"
					},
					{
						name: "找活信息"
					}
				],
				items: [1, 2, 3]
			}
		},
		mounted() {
			let self = this
			let dis = uni.createSelectorQuery().in(this);
			dis.select('#label').boundingClientRect(function(data) {

				if (self.items) {
					console.info(data.height)
					self.tatalHeight = "height:" + ((data.height * 2) + 118) + "rpx;"
				} else {
					self.tatalHeight = ""
				}
			}).exec();
		},
		methods: {
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);

			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				let self = this
				let query = uni.createSelectorQuery();
				if (this.swiperCurrent == 0) {
					query.select('#label').boundingClientRect(data => {
						console.info(data.height)
						self.tatalHeight = "height:" + ((data.height * 2) + 118) + "rpx;"
					}).exec();
				} else {
					query.select('#peo-label').boundingClientRect(data => {
						console.info(data.height)
						self.tatalHeight = "height:" + ((data.height * 2) + 118) + "rpx;"
					}).exec();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.collect {
		background: #EFF0F5;

		.swiper-item {
			background: #FFFFFF;

			.title {
				line-height: 80rpx;
				font-size: 34rpx;
				font-weight: bold;
				margin: 0 30rpx;
				border-bottom: solid 1px #d5d5d5;
				margin-top: 20rpx;
			}

			.content {
				display: flex;
				padding: 20rpx 0;
				margin: 0 30rpx;
				border-bottom: solid 1px #d5d5d5;

				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 999rpx;
					margin-right: 20rpx;
				}

				.message {
					.personage-message {
						display: flex;
						margin-bottom: 30rpx;

						.name {
							font-size: 32rpx;
						}

						.btn-message {
							display: flex;
							align-items: center;
							background: #e1e1e1;
							padding: 0 10rpx;
							border-radius: 30rpx;
							margin-left: 20rpx;

							.btn-image {
								width: 30rpx;
								height: 30rpx;
								margin: 0;
							}
						}
					}
				}
			}

			.concent {
				overflow: hidden;
				text-overflow: ellipsis;
				max-height: 120rpx;
			}

			.foot {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				font-size: 32rpx;
				align-items: center;

				.cancle {
					background: #007AFF;
					padding: 10rpx;
					color: #FFFFFF;
					border-radius: 16rpx;
				}
			}
		}

		.swiper-itemNoPage {
			text-align: center;
			image {
				margin-top: 100rpx;
				width: 400rpx;
				height: 400rpx;
			}

			.goIssue {
				display: inline-block;
				width: 400rpx;
				color: #787878;
				text-align: center;
			}

			.now {
				font-size: 32rpx;
				display: inline-block;
				width: 400rpx;
				background: #007AFF;
				color: #FFFFFF;
				border-radius: 999rpx;
				padding: 20rpx 60rpx;
				margin-top: 50rpx;
				text-align: center;
			}
		}
	}
</style>
